<template>
  <div class="Release-right">
    <div class="fans-header clearfix">
      <button class="cancel-btn" @click="goBack">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-arrow-left"></use>
        </svg>
        取消导入
      </button>
    </div>
    <div class="message-edi send-article">
      <div class="message-deep">
        <p class="message-title">深度信息</p>
        <div class="message-detail">
          <div class="message-list  clearfix">
            <div class="message-left">
              <label>文章标题：</label>
              <div class="form-control">
                <div class="input-box">
                  <input type="text" class="self-input large-input" v-model="title" placeholder="请输入内容"/>
                </div>
              </div>
            </div>
          </div>

          <div class="message-list clearfix">
            <div class="message-left">
              <label>文章标签：</label>
              <div class="form-control select-box_medium">
                <el-select v-model="value" popper-class="self-select_medium" placeholder="请选择">
                  <el-option v-for="item in options" :label="item.articleLabelName" :value="item.articleLabelId"
                             :key="item.articleLabelId">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="message-list  clearfix">
            <div class="message-left">
              <label>文章分类：</label>
              <div class="form-control select-box_medium">
                <el-select v-model="valueArt" popper-class="self-select_medium" placeholder="请选择">
                  <el-option v-for="item in optionList" :label="item.folderName" :value="item.folderId"
                             :key="item.folderId">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>

          <div class="message-list  clearfix">
            <div class="message-left">
              <label>文章上传：</label>
              <div class="form-control">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  :before-upload="beforeAvatarUpload"
                  :http-request='ajaxUpload'
                  :on-change="uploadOnChange"
                  :show-file-list="false"
                  :action="actionUrl"
                  :auto-upload="false">
                  <button class="cancel-btn color_gary">{{filterName}}</button>
                </el-upload>
              </div>
              <span class="color_B5 upload-tips">注意：上传文件支持TXT、Word、PDF格式</span>
            </div>
          </div>

          <div class="message-list  clearfix">
            <div class="message-left">
              <label></label>
              <div class="form-control">
                <button class="save-btn-two" @click="submitUpload">确定导入</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import util from '../../lib/util'

  export default {
    name: 'ReleaseManage',
    components: {},
    props: {
      clickHidden: Function
    },
    data() {
      return {
        options: [],
        value: '',
        title: '',
        header: {
          "Content-Type": "multipart/form-data",
          "Accept": "*/*"
        },
        optionList: [],
        valueArt: [],
        filterName: "请上传文件"
      }

    },
    computed: {
      actionUrl: function () {
        let name = encodeURIComponent(this.title);
        return `article/in?folderId=${this.valueArt}&title=${name}&articleLabelId=${this.value}`
      }
    },
    created() {
      this.ajaxOption();
      this.ajaxArtList();
    },
    methods: {
      // 上传文件自定义ajax
      ajaxUpload: function (content) {

        /*

                let fd = new FormData();

                fd.append('fileData', content.file);

                let name = encodeURIComponent(this.title);


                this.filterName = content.file.name;

                util.ajax.post(`article/in?folderId=${this.valueArt}&title=${name}&articleLabelId=${this.value}`, fd, {}).then((res) => {


                  if (res.code == '1') {

                    this.valueArt = '';
                    this.value = '';
                    this.title = '';
                    this.filterName = '请上传文件';

                    this.$message({
                      message: '恭喜你,上传成功',
                      type: 'success'
                    })

                  } else {

                    this.filterName = '请上传文件';
                    this.$message.error(res.msg);
                  }
                })*/
      },
      // 请求标签
      ajaxOption: function () {

        util.ajax.get('articleLabel/list').then((res) => {

          this.options = res.data || [];
        });
      },
      goBack: function () {

        this.valueArt = '';
        this.value = '';
        this.title = '';

        this.$emit('clickHidden', '')

      },
      uploadOnChange: function (file, fileList) {

        this.fileList = fileList;
        if (this.beforeAvatarUpload(file, true)) {
          this.filterName = file.name;
        }
        else return false;
      },
      // 请求文章类型
      ajaxArtList: function () {
        let that = this;
        util.ajax.post('folder/list', {}).then((res) => {

          that.optionList = res.data || [];
          let tmpArr = [];
          that.optionList.forEach((item, index) => {
            if (item.folderId !== -100) {
              tmpArr.push(item);
            }
          })
          that.optionList = tmpArr;
        });
      },
      // 上传导入文件
      submitUpload: function () {

        if (!this.title.length) {
          this.$message.error('请输入文章标题');
          return;
        }
        if (!this.value) {
          this.$message.error('请选择标签');


          return
        }
        if (!this.valueArt) {
          this.$message.error('请选择文章分类');
          return;
        }

        if (this.filterName == '请上传文件') {
          this.$message.error('请上传文件');
          return
        }


        /*获取上传信息*/
        let len = this.fileList.length - 1;
        let content = this.fileList[len];

        //最后对上传的文件后缀校验
        if (!this.beforeAvatarUpload(content, true)) {
          return;
        }

        let fd = new FormData();

        fd.append('fileData', content.raw);

        let name = encodeURIComponent(this.title);

        this.filterName = content.name;

        util.ajax.post(`article/in?folderId=${this.valueArt}&title=${name}&articleLabelId=${this.value}`, fd, {}).then((res) => {


          if (res.code == '1') {

            this.valueArt = '';
            this.value = '';
            this.title = '';
            this.filterName = '请上传文件';

            this.$message({
              message: '恭喜你,上传成功',
              type: 'success'
            })

          } else {

            this.filterName = '请上传文件';
            this.$message.error(res.msg);
          }
        })
        //this.$refs.upload.submit();

      },
      beforeAvatarUpload: function (file, showTip) {

        let includeExt = ["txt", "pdf", "doc", "docx"];
        let fileExt = file.name.substr(file.name.lastIndexOf('.') + 1);
        let pass = includeExt.indexOf(fileExt) > -1;
        if (!pass && showTip) {
          this.$message.error('上传模板只能是' + includeExt.join("、") + '格式!');
        }
        return pass;
      }

    }

  }
</script>

<style lang="scss" scoped>

  @import "@/assets/css/style.scss";

  .Release-right {
    .fans-header {
      height: 70px;
      line-height: 70px;
      border-bottom: 1px solid $listborderColor;
      button {
        width: 130px;
        height: 32px;
        line-height: 30px;
        font-size: $fs14;
      }
    }
    input {
      width: 100px;
      height: 30px;
      line-height: 30px;
      font-size: $fs14;
    }
    .message-edi {
      padding: 0px 60px 20px;
      .message-deep {
        margin-top: 20px;
        .message-title {
          font-size: $fs14;
          color: #000000;
          line-height: 40px;
          border-bottom: 1px solid $borderbottomColor;
        }
        .message-detail {
          padding-top: 11px;
          label {
            margin-right: 38px;
            width: 70px;
            float: left;
            font-size: $fs14;
            color: $listTitleColor;
            line-height: 30px;
          }
          .form-control {
            float: left;
            input, select {
              border: 1px solid $listborderColor;
            }
            .large-input {
              width: 200px;
            }
            .save-btn-two {
              width: 180px;
              margin: 20px 0px 0px 110px;
            }
            .cancel-btn {
              width: 240px;
              height: 30px;
              line-height: 30px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              font-size: $fs14;
              background: $borderbottomColor;
            }
            span {
              margin-left: 20px;
              font-size: $fs14;
              line-height: 20px;
            }
          }
          .message-list {
            margin-bottom: 10px;
            .message-left {
              float: left;
            }
          }
        }
      }
    }
    .upload-tips {
      margin-left: 20px;
      line-height: 32px;
      font-size: $fs14;
    }
  }
</style>
